<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的关注',
    navigationStyle: 'custom',
    enablePullDownRefresh: true,
  },
}
</route>
<template>
  <div class="list">
    <NavBar placeholder background="#fff">
      <template #title>
        <wd-tabs
          v-model="tab"
          swipeable
          :lineWidth="24"
          :lineHeight="3"
          color="#070B1A"
          inactiveColor="#8A8F99"
          customClass="custom-index-tabs"
          :show-scrollbar="false"
        >
          <wd-tab v-for="(item, index) in tabList" :key="index" :title="item"></wd-tab>
        </wd-tabs>
      </template>
    </NavBar>

    <LoadPage
      ref="loadPage"
      :url="`/follow-fans-app/${tab == 0 ? 'following-page' : 'fans-page'}`"
      :immediate="false"
    >
      <template #default="{ list }">
        <div class="fans-list" v-if="list.length > 0">
          <div
            class="item"
            v-for="(item, index) in list"
            :key="index"
            @click="to('/pages-sub/artist/index', { id: item.userId })"
          >
            <image class="logo" :src="item.avatar" />
            <div class="flex-1">
              <div class="name">{{ item.name }}</div>
              <div class="no">{{ item.phone.slice(0, 3) }}****{{ item.phone.slice(7) }}</div>
            </div>
            <div class="custom-button button" v-if="tab == 1" @click.stop="follow(item)">回关</div>
            <div class="custom-button button disabled" v-else @click.stop="cancelFollow(item)">
              已关注
            </div>
          </div>
        </div>
      </template>
    </LoadPage>
  </div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { msgSuccess, showModal } from '@/utils/index'
import { to } from '@/utils/page'
const loadPage = ref()
const tab = ref<number>(0)
const tabList = ref(['关注', '粉丝'])

const userStore = useUserStore()

const filter = {
  userId: userStore.userInfo.userId,
}

onMounted(() => {
  loadPage.value?.getData(filter, true)
})

watch(
  () => tab.value,
  () => {
    setTimeout(() => {
      loadPage.value?.getData(filter, true)
    }, 100)
  },
)

onReachBottom(() => {
  loadPage.value?.getMore(filter)
})
// 下拉刷新
onPullDownRefresh(() => {
  loadPage.value?.getData(filter, true)
})

// 关注
function follow(item) {
  uni.showLoading()
  http
    .post('/follow-fans-app/follow', {
      starUserId: item.userId,
    })
    .then((res: any) => {
      msgSuccess('操作成功')
      loadPage.value?.getData(filter, true)
    })
    .finally(() => {
      uni.hideLoading()
    })
}

// 取消关注
function cancelFollow(item) {
  showModal({
    title: '提示',
    content: '确定取消关注吗？',
  }).then(() => {
    uni.showLoading()
    http
      .post('/follow-fans-app/cancel', {
        starUserId: item.userId,
      })
      .then((res: any) => {
        msgSuccess('操作成功')
        loadPage.value?.getData(filter, true)
      })
      .finally(() => {
        uni.hideLoading()
      })
  })
}
</script>

<style scoped lang="scss">
.list {
  min-height: 100vh;
  padding: 28rpx 30rpx;
  background-color: var(--bgc4);

  .fans-list {
    background-color: #fff;
    border-radius: 30rpx;

    .item {
      display: flex;
      align-items: center;
      padding: 30rpx 24rpx;
      .logo {
        width: 76rpx;
        height: 76rpx;
        margin-right: 24rpx;
        background-color: var(--bgc1);
        border-radius: 50%;
      }
      .name {
        font-size: 30rpx;
        line-height: 36rpx;
        color: var(--color1);
      }
      .no {
        font-size: 23rpx;
        color: var(--color4);
      }
      .button {
        width: 108rpx;
        height: 53rpx;
        font-size: 23rpx;
        font-weight: 400;
        box-shadow: none;
      }
    }
  }
}
</style>
